<template>
  <div class="container">
    <headers />
    <top :miva-show="mivaShow" @mivaShowClose="mivaShow = false" />

    <div class="cont">
      <div class="list">
        <div class="prise">商户简称</div>
        <input v-model="baseInfo.nickname" type="text" class="type name">
      </div>

      <div class="list">
        <div class="prise">所属类型</div>
        <div class="type">
          {{ buffer_type }}
          <img src="@/assets/select.png" class="select" @click="showPicker = true">
        </div>
      </div>

      <div class="list address">
        <div class="addressName">地址</div>
        <input v-model="baseInfo.address" type="text" class="type">
      </div>

      <div class="list">
        <div class="prise">开始营业时间</div>
        <div class="type">
          {{ baseInfo.start_time }}
          <img
            src="@/assets/select.png"
            class="select"
            @click="showTimeStart = true"
          >
        </div>
      </div>

      <div class="list">
        <div class="prise">结束营业时间</div>
        <div class="type">
          {{ baseInfo.end_time }}
          <img
            src="@/assets/select.png"
            class="select"
            @click="showTimeEnd = true"
          >
        </div>
      </div>

      <div class="list">
        <div class="prise">联系电话</div>
        <input v-model="baseInfo.mobile" type="text" class="type name">
      </div>
    </div>
    <div class="rule">
      <div class="prise">
        <van-checkbox v-model="checked" checked-color="#487cfb">请同意</van-checkbox>
      </div>
      <div class="rule-wz" @click="mivaShow = true">商户赞助规则</div>
    </div>
    <div class="next-btn" @click="submit">下一步,奖项设置</div>
    <div class="aprt">有安米科技</div>

    <!-- 所属类型picker -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="name"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 开始营业picker -->
    <van-popup v-model="showTimeStart" position="bottom">
      <van-datetime-picker
        v-model="buffer_start_time"
        show-toolbar
        type="time"
        :min-hour="0"
        :max-hour="24"
        @change="onChange"
        @cancel="showTimeStart = false"
        @confirm="showTimeStart = false"
      />
    </van-popup>
    <!-- 结束营业picker -->
    <van-popup v-model="showTimeEnd" position="bottom">
      <van-datetime-picker
        v-model="buffer_end_time"
        show-toolbar
        type="time"
        :min-hour="0"
        :max-hour="24"
        @change="onChange"
        @cancel="showTimeEnd = false"
        @confirm="showTimeEnd = false"
      />
    </van-popup>
  </div>
</template>
<script>
import headers from '@/components/header'
import top from '@/components/top'
import { Toast } from 'vant'
import {
    businessPerfection,
    businessGetType,
    businessGet
} from '@/api/miva'
export default {
    components: {
        headers: headers,
        top: top
    },
    data() {
        return {
            buffer_start_time: '0:0',
            buffer_end_time: '0:0',
            buffer_type: '',
            baseInfo: {
                nickname: '',
                type: 1,
                address: '',
                mobile: '',
                start_time: '0:0',
                end_time: '0:0'
            },
            mivaShow: false,
            showPicker: false,
            columns: [],
            showTimeStart: false,
            showTimeEnd: false,
            checked: false
        }
    },
    async created() {
        const res_info = await businessGet()
        if (res_info.data.is_perfect === 2) {
            this.baseInfo = res_info.data
            this.checked = true
        }
        // 获取商户类型
        const res_type = await businessGetType()
        const type_now = res_type.data.find(obj => obj.id === res_info.data.type)
        this.columns = res_type.data
        this.buffer_type = type_now.name
    },
    methods: {
        onConfirm(value) {
            this.buffer_type = value.name
            this.baseInfo.type = value.id
            this.showPicker = false
        },
        onChange(value) {
            this.baseInfo['start_time'] = this.buffer_start_time + ':00'
            this.baseInfo['end_time'] = this.buffer_end_time + ':00'
        },
        submit() {
            console.log(this.checked, this.baseInfo)
            if (!this.checked) {
                Toast({ type: 'danger', message: '请同意商户赞助规则' })
                return
            }
            businessPerfection(this.baseInfo).then(res => {
                console.log(res)
                if (res.code !== 1) {
                    Toast({ type: 'danger', message: res.msg })
                    return
                }
                this.$router.replace({
                    name: 'home'
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>
.container {
  width: 95%;
  margin: 0 auto;
  .cont {
    width: 100%;
    .list {
      border: 1px solid #487cfb;
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
      margin: 15px 10px;
      border-radius: 6px;
    }
    .name {
      text-align: right;
    }
    .prise {
      font-size: 14px;
      color: #b6b6b6;
    }
    .type {
      font-size: 16px;
      font-weight: bold;
      color: #487cfb;
      border: none;
    }
    .num {
      font-size: 14px;
      color: #487cfb;
      .show {
        color: #b6b6b6;
        padding-left: 5px;
      }
    }
    .select {
      width: 18px;
      padding-left: 10px;
      vertical-align: middle;
    }
    .address {
      display: block;
      .addressName {
        margin-bottom: 10px;
        color: #b6b6b6;
      }
    }
  }
  .rule {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 5%;
    .prise {
      text-align: center;
      color: #b6b6b6;
    }
    .rule-wz {
      color: #487cfb;
    }
  }
  .next-btn {
    width: 95%;
    margin: 0 auto;
    padding: 15px 0;
    background: #487cfb;
    color: #fff;
    text-align: center;
    margin-bottom: 10%;
    font-size: 14px;
    border-radius: 6px;
  }
  .aprt {
    width: 95%;
    margin: 0 auto;
    border-top: 1px solid #d9d9d9;
    padding-top: 15px;
    text-align: center;
    color: #999999;
    font-size: 14px;
  }
}
</style>
